import { ImageResponse } from 'next/og';
import { getAssetBySlug } from '@/lib/queries/assets';
import { catName } from '@/lib/taxonomy';
import { ogMark } from '@/components/layout/logo';

export const runtime = 'nodejs';
export const alt = 'RareIndex asset card';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

function money(v: number | null): string {
  if (v === null) return 'Data unavailable';
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: v >= 1000 ? 0 : 2 }).format(v);
}

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const a = await getAssetBySlug(slug);
  const title = a?.title ?? 'RareIndex';
  const cat = a ? catName(a.categorySlug) : '';
  const riv = a ? money(a.rivUsd) : '';
  const chg = a?.change30d ?? null;
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#0b0c0e', color: '#f2f2f0', fontFamily: 'sans-serif' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 28 }}>
          {ogMark(44)}
          <span style={{ display: 'flex', fontWeight: 600 }}>
            <span>Rare</span>
            <span style={{ color: '#D9AE5F' }}>Index</span>
          </span>
          <span style={{ color: '#8b8b93' }}>· {cat}</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ fontSize: 56, fontWeight: 600, lineHeight: 1.1, letterSpacing: -1 }}>{title.length > 80 ? `${title.slice(0, 79)}…` : title}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
            <span style={{ fontSize: 24, color: '#8b8b93', textTransform: 'uppercase', letterSpacing: 2 }}>RareIndex Valuation</span>
            <span style={{ fontSize: 64, fontWeight: 700 }}>{riv}</span>
            {chg !== null ? <span style={{ fontSize: 32, color: chg >= 0 ? '#34c47c' : '#ef5a5f' }}>{`${chg >= 0 ? '+' : ''}${(chg * 100).toFixed(1)}% 30D`}</span> : null}
          </div>
        </div>
        <div style={{ fontSize: 22, color: '#6f6f76' }}>{a ? `${a.salesCount.toLocaleString('en-US')} verified sales · ${a.activeListings.toLocaleString('en-US')} active listings · www.rareindex.io` : 'www.rareindex.io'}</div>
      </div>
    ),
    { ...size },
  );
}